<template>
	<a-spin :loading="loading" style="width: 100%">
		<a-card
			class="general-card"
			:header-style="{ paddingBottom: '0' }"
			:body-style="{
				padding: '20px'
			}"
		>
			<template #title>内容类型占比</template>
			<Chart height="310px" :option="chartOption" />
		</a-card>
	</a-spin>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import useChartOption from '@/hooks/chart-option';

const { loading } = useLoading();
const { chartOption } = useChartOption((isDark) => {
	// echarts support https://echarts.apache.org/zh/theme-builder.html
	// It's not used here
	return {
		legend: {
			left: 'center',
			data: ['纯文本', '图文类', '视频类'],
			bottom: 0,
			icon: 'circle',
			itemWidth: 8,
			textStyle: {
				color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
			},
			itemStyle: {
				borderWidth: 0
			}
		},
		tooltip: {
			show: true,
			trigger: 'item'
		},
		graphic: {
			elements: [
				{
					type: 'text',
					left: 'center',
					top: '40%',
					style: {
						text: '内容量',
						textAlign: 'center',
						fill: isDark ? '#ffffffb3' : '#4E5969',
						fontSize: 14
					}
				},
				{
					type: 'text',
					left: 'center',
					top: '50%',
					style: {
						text: '928,531',
						textAlign: 'center',
						fill: isDark ? '#ffffffb3' : '#1D2129',
						fontSize: 16,
						fontWeight: 500
					}
				}
			]
		},
		series: [
			{
				type: 'pie',
				radius: ['50%', '70%'],
				center: ['50%', '50%'],
				label: {
					formatter: '{d}%',
					fontSize: 14,
					color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
				},
				itemStyle: {
					borderColor: isDark ? '#232324' : '#fff',
					borderWidth: 1
				},
				data: [
					{
						value: [148564],
						name: '纯文本',
						itemStyle: {
							color: isDark ? '#3D72F6' : '#249EFF'
						}
					},
					{
						value: [334271],
						name: '图文类',
						itemStyle: {
							color: isDark ? '#A079DC' : '#313CA9'
						}
					},
					{
						value: [445694],
						name: '视频类',
						itemStyle: {
							color: isDark ? '#6CAAF5' : '#21CCFF'
						}
					}
				]
			}
		]
	};
});
</script>

<style scoped lang="less"></style>
